<template>
<div>
    <div class="main">
    <el-card shadow="hover">
        <div slot="header">请输入信息</div>
<el-row class="inp"  :gutter="30">
  <el-col :span="8">
      <el-input  placeholder="请输入姓名" size="small" v-model="search.name"></el-input>
  </el-col>
  <el-col :span="8">
    <el-date-picker
        v-model="search.startTime"
        type="date"
        placeholder="选择开始时间"
        format="yyyy 年 MM 月 dd 日"
        value-format="yyyy-MM-dd">
    </el-date-picker>

  </el-col>
  <el-col :span="8">
<el-select v-model="search.classId" placeholder="请选择班级">
    <el-option
      v-for="item in classList"
      :key="item.id"
      :label="item.className"
      :value="item.id">
    </el-option>

  </el-select>
  </el-col>



</el-row>
<el-row :gutter="30" style="margin-top:10px">

  <el-col :span="6" :offset="18">
      <el-button type="primary" size="small"  @click="doSearch">搜索</el-button>
      <el-button type="danger" size="small" @click="restData">重置</el-button>



  </el-col>
</el-row>
    </el-card>
      <el-card>
      <div slot="header">学生列表</div>
        <el-button type="primary" @click="addStudent" style="margin-bottom: 10px" size="small">新增学员</el-button>
       <el-table
    :data="studentList"
    border
    style="width: 100%">

    <el-table-column
      prop="name"
      label="姓名"
      width="150">
    </el-table-column>
    <el-table-column
      prop="cityText"
      label="省份"
      width="150">
    </el-table-column>

    <el-table-column
      prop="classname"
      label="班级"
      width="150">
    </el-table-column>
    <el-table-column
      prop="sexv"
      label="性别"
      width="200">
    </el-table-column>
         <el-table-column
             prop="tel"
             label="电话"
             width="150">
         </el-table-column>
         <el-table-column
             prop="dormname"
             label="宿舍"
             width="150">
         </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="150">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
        <el-button type="text" size="small" @click="doEdit(scope.row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>

 <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.start"
      :page-sizes="page.sizes"
      :page-size="page.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.totalCount">
    </el-pagination>

  </el-card>

    </div>


    <!-- 弹窗内容 -->
   <el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="80%"
  :show-close="false"
  >
  <div  v-if="showCost">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>基本信息</span>
      </div>

      <el-form :model="xyUser" :rules="rules" ref="xyUser" label-width="100px" class="demo-ruleForm">
        <el-row>

          <el-col :span="6">
            <el-form-item  label="姓名:" prop="name">
              <el-input v-model="xyUser.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="身份证:" prop="manID">
              <el-input v-model="xyUser.manID"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="电话:" prop="tel">
              <el-input v-model="xyUser.tel"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="2" class="sex">
            性别:
          </el-col>
          <el-col :span="4">
            <el-select v-model="xyUser.sex" placeholder="请选择性别">

              <el-option
                  v-for="item in sexs"
                  :key="item.sex"
                  :label="item.name"
                  :value="item.sex">
              </el-option>
            </el-select>
          </el-col>



        </el-row>
        <el-row class="fot" type="flex">
          <el-col :span="6">
<!--            选择城市-->
            <el-cascader
                size="small"
                :options="cityOptions"
                v-model="cityValue"
                @change="getCity">
            </el-cascader>
          </el-col>
          <el-col :span="6">
            <el-select v-model="xyUser.classId" placeholder="请选择班级">
              <el-option
                  v-for="item in classList"
                  :key="item.id"
                  :label="item.className"
                  :value="item.id">
              </el-option>

            </el-select>
          </el-col>
          <el-col :span="6">
            <el-select v-model="xyUser.dormId" placeholder="请选择宿舍">
              <el-option
                  v-for="item in dromList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>

            </el-select>
          </el-col>
          <el-col :span="6">
            <el-date-picker
                v-model="xyUser.dormStartTime"
                type="date"
                placeholder="选择开始入住时间"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-col>
          <el-col :span="6">
            <el-date-picker
                v-model="xyUser.dormEndTime"
                type="date"
                placeholder="选择离开宿舍时间"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-col>

        </el-row>

      </el-form>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>非必填信息</span>
      </div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-row>
          <el-col :span="6">
            <el-form-item label="备用电话:" prop="tel">
              <el-input v-model="xyUser.tel2"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="QQ:" prop="qq">
              <el-input v-model="xyUser.qq"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="微信:" prop="wx">
              <el-input v-model="xyUser.wx"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="毕业院校:" prop="school">
              <el-input v-model="xyUser.school"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="毕业工作:" prop="job">
              <el-input v-model="xyUser.job"></el-input>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>

    </el-card>

    <el-row :gutter="10" style="margin:30px auto" >
      <el-col :span="6" >
        <el-button type="primary" size="medium" @click="showNext" >下一页</el-button>

      </el-col>
    </el-row>
  </div>
     <!-- 展示第二页 -->
     <div v-else>
       <el-card class="box-card">
         <div slot="header" class="clearfix">
           <span>填写内容:</span>
         </div>
        <el-form ref="form" :model="cost" label-width="80px">
          <el-row :gutter="10">
           <el-col :span="6">
             <el-radio v-model="cost.costType" label="0" size="small">学费</el-radio>
             <el-radio v-model="cost.costType" label="1" size="small">住宿费</el-radio>
           </el-col>
            <el-col :span="6">
              <el-form-item label="费用:" prop="costValue">
                <el-input-number size="small" v-model="cost.costValue"  :min="0"  label="描述文字"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="缴费时间:" prop="costTime">
                <el-date-picker
                    v-model="cost.costTime"
                    type="date"
                    placeholder="选择日期"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-form-item label="备注:" prop="costTime">
           <el-col :span="6">
             <el-input
                 type="textarea"
                 placeholder="请输入内容"
                 v-model="cost.costBak"
                 maxlength="100"
                 show-word-limit
             >
             </el-input>
           </el-col>
            </el-form-item>
          </el-row>
        </el-form>
        <el-button type="primary" size="small" @click="TempSave">保存</el-button>


       </el-card>

<!--       临时缴费记录-->
       <el-card class="box-card" style="width: 95%;margin: 20px auto" v-show="showtempCost">
         <div slot="header" class="clearfix">
           <span>临时缴费记录:</span>
         </div>
         <el-row :gutter="10">
          <el-col :span="18">
            <el-table
                :data="tempCost"
                style="width: 100%">
              <el-table-column
                  prop="costType"
                  label="类型"
                  width="180">
                <template slot-scope="scope">
                  <span>{{ scope.row.costType == '0'?'学费':'住宿费' }}</span>
                </template>
              </el-table-column>
              <el-table-column
                  prop="costValue"
                  label="费用"
                  width="180">
              </el-table-column>
              <el-table-column
                  prop="costTime"
                  label="时间">
              </el-table-column>
              <el-table-column
                  prop="costBak"
                  label="备注">
              </el-table-column>
              <el-table-column
                  prop="costBak"
                  label="操作">
                <template slot-scope="scope">
                 <el-button type="danger" @click="DoDelTempItem(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
         </el-row>



       </el-card>
<!--  历史缴费记录-->
       <div v-show="showHistory">
         <el-card class="box-card" style="width: 95%;margin: 20px auto" >
           <div slot="header" class="clearfix">
             <span>历史缴费记录:</span>
           </div>
           <el-row :gutter="10">
             <el-col :span="18">
               <el-table
                   :data="historyCost"
                   style="width: 100%">
                 <el-table-column
                     prop="costType"
                     label="类型"
                     width="180">
                   <template slot-scope="scope">
                     <span>{{ scope.row.costType == '0'?'学费':'住宿费' }}</span>
                   </template>
                 </el-table-column>
                 <el-table-column
                     prop="costValue"
                     label="费用"
                     width="180">
                 </el-table-column>
                 <el-table-column
                     prop="costTime"
                     label="时间">
                 </el-table-column>
                 <el-table-column
                     prop="costBak"
                     label="备注">
                 </el-table-column>

               </el-table>
             </el-col>
           </el-row>
         </el-card>
       </div>




       <el-button type="primary" @click="showCost = true">返回上一页</el-button>
     </div>


  <span slot="footer" class="dialog-footer">
    <el-button @click="closeCard ">取 消</el-button>
    <el-button type="primary" @click="getdetail">确 定</el-button>
  </span>
</el-dialog>

</div>
</template>

<script>
import {reseData} from '@/utils/count'
import studentApi from '@/api/xy/student'
import clazzApi  from '@/api/xy/clazz.js'
import classList from '@/api/xy/clazz.js'
import drom  from '@/api/xy/drom.js'
import { regionDataPlus,CodeToText , TextToCode} from 'element-china-area-data'
import _ from 'lodash'
import cost from '@/api/xy/cost.js'
export default{
    name:"Xystu",
data(){
    return{
      ruleForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      rules: {
          name:[{ required: true, message: '请输入名字', trigger: 'blur' },
            { min: 2, max: 5, message: '长度在 15 到 18 个字符', trigger: 'blur' }
           ],
        manID:[
            { required: true, message: '请输入身份证号', trigger: 'blur' },
            { min: 15, max: 18, message: '长度在 15 到 18 个字符', trigger: 'blur' }
          ]

      },
      dialogVisible: false,

      search: {},
      classList: [],
      studentList:[],
      dromList:[],
      page:{
        start: 1,
        limit:10,
        sizes: [10, 20, 30, 40],
        totalCount:0
      },
      xyUser:{},
      sexs:[{
        sex:0,
        name:'男'
      },{
      sex:1,
        name:'女'
      }],
      // 城市选择类内容
      cityOptions: regionDataPlus,
      cityValue: [],
      //展示表单下一页内容
      showCost:true,
      // 缴费内容
      cost:{
        costType :'0',
      },
      tempCost:[

      ],
      //获取历史账单
      historyCost:{}
    }

},
  computed:{
      showHistory(){
        return this.historyCost == false?false:true
      },
      showtempCost(){
        return this.tempCost == false ?false:true
      }

  },
methods:{
      // 删除学员
  handleClick(row) {
        console.log(row);
        let  id = row.id
        studentApi.delStudent({
          id:id
        })
    .then(res=>{
        this.getStudent()
    })
      },
        handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.page.limit=val;
        this.getStudent()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.page.start=val
        this.getStudent()

      },
  //获取学生列表的详细信息
  getStudent(){

  let  params =  {
    start:this.page.start,
    limit: this.page.limit,
    ...this.search
  }
    console.log(params)
  studentApi.studentList(params).then(res=>{
    this.studentList = res.data.list
    console.log(res.data)
    this.page.totalCount = res.data.totalRow

  })

  },
  //获取班级列表
  getClass(){
    clazzApi({
      start:1,
      limit:99
    })
    .then(res=>{
      console.log(res)
      this.classList=res.data.list;
    })
  },
  doSearch(){
    //按照条件模糊搜索
    // 此时应该在此处重置搜索条件
    this.page.start=1;
  this.getStudent();
  },
  restData(){
  // 重置搜索条件
    this.page.start=1;
    this.page.limit=10;
    this.search='';
    this.getStudent();

  },
  //打开列表
  addStudent(){
  this.dialogVisible = true;
    console.log(111)

  // studentApi.addStudent({
  //   // 得到参数
  //
  // })
  },
  // 添加或者编辑新学生
  getdetail(){
    console.log(this.xyUser)
    let xyUser = this.xyUser;
    let  sunmit ={
      xyUser,
      _size:this.tempCost.length,

    }

    //添加缴费的字段
    for (let i=0; i<this.tempCost.length;i++){
      let item = this.tempCost[i]
      sunmit[`xyCostItems_${i}`]={...item}
      delete sunmit[`xyCostItems_${i}`].tempId
    }

    console.log(sunmit)
    let  api = null;
    if (this.xyUser.id){
      api  = studentApi.updata
    }else {
      api =  studentApi.addStudent
    }
    api(sunmit)
    .then(res=>{
      console.log(res)
      if (res.code == 'success'){
        this.$message('更新成功');
        this.getStudent();
      }else {
        this.$message({
          message: '更新错误请重试!!!!!',
          type: 'warning'
        });
      }
    })
    // studentApi.addStudent({xyUser})
    // .then(res=>{
    //   console.log(res)
    // })

this.closeCard()

  },
  //关闭窗口清除数据
  closeCard(){
    this.xyUser={};
    this.tempCost = [];
    this.historyCost={};
    this.dialogVisible = false;
    this.showCost = true;
    this.selectedOptions=[]
    this.getStudent()
    this.cityValue=[]
  },

  doEdit(row){
    this.dialogVisible = true
    studentApi.detailStudent({
      id:row.id
    })
    .then(res=>{

      this.xyUser = res.data;
      // this.selectedOptions
      // let cityStr = res.data.cityText;
      // console.log(this.xyUser)
      // if (cityStr != null && cityStr.indexOf(',') != -1){
      //   this.selectedOptions = cityStr.split(',')
      //   console.log(this.selectedOptions)
      // }
      // this.cityValue = res.data.city.split(',')
      if (res.data.city != '' && res.data.city.indexOf(',') != -1) {
        this.cityValue = res.data.city.split(',')
      }
    })
    //获取历史缴费账单
    cost.costHistory({
      userId:row.id
    })
    .then(res=>{
      this.historyCost = res.data.list
      console.log( this.historyCost)
    })
  },
  //获取宿舍列表
getDromList(){
    drom.dromList({
      start:1,
      limit:99
    })
  .then(res=>{
    this.dromList=res.data.list;
    console.log('drom',res)

  })
},
  getCity(val){
    // 获取城市编码
    CodeToText[val[0]]
    console.log(val)
    //通过此方式获取城市的文本信息
    this.xyUser.city =  val.join(',')
    let citytxt =[]
    val.forEach(el=>{

      citytxt.push(CodeToText[el])
    })
    this.xyUser.cityText = citytxt.join(',')
  },
  showNext(){
    this.showCost = false
  },
  //保存临时的缴费记录
  TempSave(){
    let CostItem = _.clone(this.cost)
    CostItem.tempId = new Date().getTime()
    // 对得到的数值进行克隆
    this.tempCost.push(CostItem)
    //重置输入框
    reseData(this,'cost')
  },
  DoDelTempItem(val){
    //删除某一条临时数据,使用过滤器
    // 当数据量较小时选择此方法
    this.tempCost =  this.tempCost.filter(el=>el.tempId !== val.tempId)
  }

},
 created () {
   this.getStudent()
   this.getClass()
   this.getDromList()
 }

}

</script>
<style lang='scss' scoped>
.main{
    margin: 30px;


}
.sex{
  text-align: center;
  line-height: 40px;
}
.fot{
  left: 30px;
  margin: 0 auto;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}

</style>
